<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title>商家修改</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 确保适当的绘制和触屏缩放 -->
	<link rel="stylesheet" href="{$url_css}bootstrap.min.css" type="text/css">
	<link rel="stylesheet" href="{$url_css}admin.css" type="text/css">
	<link rel="stylesheet" href="{$url_js}fileinput/css/fileinput.min.css" type="text/css">
	<script type="text/javascript" src="{$url_js}jquery-2.2.0.min.js"></script>
	<script type="text/javascript" src="{$url_js}bootstrap.min.js"></script>
	<script type="text/javascript" src="{$url_js}calendar/WdatePicker.js"></script>
	<script type="text/javascript" src="{$url_js}AutoTips.js"></script>
	<script type="text/javascript" src="{$url_js}jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="{$url_js}jquery-ui.min.js"></script>
	<script type="text/javascript" src="{$url_js}jquery.contextmenu.r2.js"></script>
	<script type="text/javascript" src="{$url_js}fileinput/js/fileinput.min.js"></script>
	<script type="text/javascript" src="{$url_js}fileinput/js/locales/zh.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0E00dc720a00eee791631ce67d2ee6da"></script>
	<style type="text/css">
		{literal}
		.iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
		.iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}

		.cover_img_div input[type="file"] {
			cursor: inherit;
			opacity: 0;
			z-index: 99;
		}

		.atlas1_img_div input[type="file"] {
			cursor: inherit;
			opacity: 0;
			z-index: 99;
		}

		.div-child-left {
			position: absolute;
			top: 0px;
			left: 0;
			width: 0px;
		}

		.cover_img_div {
			min-width: 163px;
			position: relative;
			float: left;
			margin: 4px;
			border: 1px solid #ddd;
			border-radius: 4px;
			text-align: center;
		}

		.atlas_img_div {
			width: 360px;
			height: 240px;
			position: relative;
			float: left;
			border: 1px solid #ddd;
			border-radius: 4px;
			text-align: center;
		}

		.input-file {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 85px;
			z-index: 1;
		}

		.delete_btn {
			position: absolute;
			right: 0;
			bottom: 0;
			width: 55px;
			z-index: 1;
		}

		.div_btn {
			width: 100%;
		}

		.sort_input {
		}

		.sort_div {
			margin: 10px 75px;
			float: left;
		}

		.div_btn input {
			width: 7%;
		}

		div.cate-wrapper ul.cate-list {
			max-height: 400px;
			overflow: auto
		}

		.atlas_img_div img {
			height: 240px
		}

		.cover_img_div input[type="file"] {
			cursor: inherit;
			opacity: 0;
			z-index: 99;
		}
		.atlas1_img_div input[type="file"] {
			cursor: inherit;
			opacity: 0;
			z-index: 99;
		}
		.div-child-left {
			position:absolute;
			top:0px;
			left:0;
			width:0px;
		}
		.cover_img_div{min-width:163px; position:relative;float:left;margin:4px;border:1px solid #ddd;border-radius:4px;text-align: center;}
		.atlas_img_div {width:360px; height: 240px; position:relative; float:left; border:1px solid #ddd; border-radius:4px; text-align: center;}
		.input-file {position: absolute;left: 0;bottom:0;width: 85px;z-index: 1;}
		.delete_btn {position: absolute;right: 0;bottom:0;width: 55px;z-index: 1;}
		.div_btn{ width: 100%;}
		.sort_input{}
		.sort_div{margin: 10px 75px; float: left;}
		.div_btn input{ width: 7%;}
		div.cate-wrapper ul.cate-list{max-height: 400px; overflow: auto}
		.atlas_img_div img{height: 240px}
		/*
		 * user auto tips css
		 */
		ul { list-style: none outside none; margin: 0px; padding: 0px; -webkit-padding-start: 0px;}
		.recipients-tips{ font-family:Tahoma, Arial;position:absolute; background:#fff; z-index:2147483647; padding:2px; border:1px solid #ccc; display:none; margin: 0px;}
		.recipients-tips li a{display:block; padding:5px 10px; color:#333; cursor:pointer; font-family:Tahoma, Arial;}
		.recipients-tips li a:hover{text-decoration: none;}
		.recipients-tips li a em{font-weight:700; color:#000; font-family:Tahoma, Arial;}
		.autoSelected{background:#f4f4f4; font-family:Tahoma, Arial;}
		{/literal}
	</style>
</head>
<body>

<div class="container" style="width:96%">
	<table id="myformtable" class="table table-bordered table-striped" align="center">
		<input type="hidden" name="ShopId" value="{$info['Id']}"/>
		<input type="hidden" name="page" value="{$page}"/>
		<tbody>
		<tr>
			<td colspan="2"><h5>{($info)?'编辑':'添加'}商家，其中名称、分类、状态、内容、封面图为必填</h5></td>
		</tr>

		<tr>
			<td><span style="color: red">*</span>商家标题：</td>
			<td><input type="text" class="form-control" id="Name" name="Name" value="{$info['Name']|html}"
			           placeholder="商家标题"
			           style="width: 85%;"/>
			</td>
		</tr>
		<tr>
			<td style="width: 120px;">城市ID：</td>
			<td><input type="text" id="CityId" name="CityId" value="1" style="width: 200px"/>【醴陵 => 1】<em>暂时只开通醴陵</em></td>
		</tr>
		<tr>
			<td style="width: 120px;">搜索用关键字：</td>
			<td><input type="text" id="Keywords" name="Keywords" style="width: 300px" value="{$info['Keywords']}" /></td>
		</tr>
		<tr>
			<td>描述：</td>
			<td>
                <textarea rows="3" cols="2" class="form-control" id="Description" name="Description" placeholder="描述"
                          style="width: 80%;">{$info['Description']|html}</textarea>
			</td>
		</tr>
		<tr>
			<td style="width: 120px;">管理用户ID：</td>
			<td><input type="text" id="UserId" name="UserId" value="{$info['UserId']}" style="width: 200px"/><em>商家管理用户ID</em></td>
		</tr>
		<tr>
			<td style="width: 120px;">活动ID：</td>
			<td><input type="text" id="ActiveId" name="ActiveId" value="{$info['ActiveId']}" style="width: 200px"/></td>
		</tr>
		<tr>
			<td class="col-xs-2"><span style="color: red">*</span>商家分类：</td>
			<td>
				<select id="CateId" name="CateId" class="form-control" style="width: 100px;">
					{foreach $cate as $v}
						<option value="{$v.Id}" {($info['CateId']==$v['Id'])?'selected="selected"':''}>{$v.Name}</option>
					{/foreach}
				</select>
			</td>
		</tr>
		<tr>
			<td>
				封面图：<br/>
				支持：jpg，png<br/>
				尺寸至少320*240<br/>
			</td>
			<td>
				<table>
					<iframe name='upframe' id="upframe" style='display:none'></iframe>
					<tr>
						<td>
							<input type="file" class="file_img" id="Cover" name="Cover" minW="100" minH="100" maxSize="512000" data="{$info['Cover']}" onchange="verifyImg($(this))"/>
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr id="atlas_content">
			<td><span style="color: red">*</span>内容：</td>
			<td id="atlas_height">
				<div class="contextMenu" id="myMenu1" style="display: none;">
					<ul>
						<li id="open">设为封面图</li>
					</ul>
				</div>
				<div id="div_height" style="min-height: 50px">
					<div style="margin-left: 5px">
						<span><span><span><input type="button" class="btn btn-primary" value="新增" onclick="addAtlas($(this), 1)"/></span></span></span>
					</div>
					<div id="module_list" class="ui-sortable">
						{if !empty($info['Content'])}
							{foreach $info['Content'] as $k => $v}
								<div style="margin: 10px 75px; float: left;" class="sort_div modules">
									<div style="width: 450px" class="m_title">
										<input type="hidden" id="atlas1_img_{$k}" name="atlas1_img[]" value="{$v['ImgUrl']}"/>
										<form action="?do=Atlas" enctype="multipart/form-data" method="post" target="upframe" class="form-inline">
											<div class="input-group" style="margin: 1px 0px">
												<div class="input-group-addon">选择图片</div>
												<div class="atlas_img_div form-group" style="position: relative">
													<img id="atlas_img_{$k}" src="{$v['ImgUrl']}" alt="" style="max-width: 360px;max-height: 240px"/>
													<div class="form-group atlas1_img_div div-child-left">
														<input type="hidden" name="atlas" value="fileimg_{$k}">
														<input style="width: 360px; height: 240px" type="file" class="form-control input-file" name="fileimg_{$k}" id="fileimg_{$k}" onchange="$(this).parents('form').submit();"/>
													</div>
												</div>
											</div>
										</form>
										<div class="input-group" style="margin: 1px 0px">
											<div class="input-group-addon">图片文字</div>
											<textarea style="width: 300px; height: 123px" type="text" class="form-control" name="atlas_text[]" id="atlas_text">{$v['Text']}</textarea>
											<div>
												<input type="button" class="btn btn-primary" value="新增" onclick="addAtlas($(this))" style="margin-top: 10px; margin-left: 5px"/>
												<input type="button" class="btn btn-default" value="删除" onclick="atlasdelCode($(this))" style="margin-top: 40px; margin-left: 5px"/>
											</div>
										</div>
									</div>
								</div>
							{/foreach}
						{/if}
					</div>
				</div>
			</td>
		</tr>
		<tr>
			<td>店铺地址：</td>
			<td><input type="text" id="Address" name="Address" style="width: 300px" value="{$info['Address']}" /></td>
		</tr>
		<tr>
			<td>最大可预支金果数：</td>
			<td><input type="text" id="MaxJCoin" name="MaxJCoin" style="width: 150px" value="{$info['MaxJCoin']}" /></td>
		</tr>
		<tr>
			<td>排序：</td>
			<td><input type="text" id="Sort" name="Sort" style="width: 300px" value="{$info['Sort']}" /><em>数值越大，越靠前。倒序排序</em></td>
		</tr>
		<tr>
			<td>商家已发放金果：</td>
			<td>{$info['JCoin']}</td>
		</tr>
		<tr>
			<td>会员数：</td>
			<td>{$info['Members']}</td>
		</tr>
		<tr>
			<td>浏览数：</td>
			<td><input type="text" id="Brower" name="Brower" style="width: 300px" value="{$info['Brower']}" /><em>关注数是浏览数+会员数</em></td>
		</tr>
		<tr>
			<td>店铺电话：</td>
			<td><input type="text" id="Mobile" name="Mobile" value="{$info['Mobile']}" /></td>
		</tr>
		<tr>
			<td>坐标：</td>
			<td>
				经度：<input type="text" id="Abscissa" name="Abscissa" value="{$info['Abscissa']}" />纬度:<input type="text" id="Ordinate" name="Ordinate" value="{$info['Ordinate']}" />
				点击地图中的点获取坐标。地图中双击放大
			</td>
		</tr>
		<tr>
			<td>点击获取坐标：</td>
			<td> <div style="width:697px;height:550px;border:#ccc solid 1px;" id="allmap"></div></td>
		</tr>
		<tr>
			<td>创建时间：</td>
			<td>{$info['CreateTime']}</td>
		</tr>
		<tr>
			<td>状态：</td>
			<td>
				<label class="radio-inline"><input type="radio" name="Status"
				                                   value="1" {($info['Status'] == 1 || intval($info['Status']) == 0)?'checked':''} />普通</label>
				<label class="radio-inline"><input type="radio" name="Status"
				                                   value="2" {($info['Status'] == 2 || !isset($info['Status']))?'checked':''} />过期</label>
				<label class="radio-inline"><input type="radio" name="Status"
				                                   value="3" {($info['Status'] == 3)?'checked':''} />删除状态</label>
				<label class="radio-inline"><input type="radio" name="Status"
				                                   value="4" {($info['Status'] == 4)?'checked':''} />隐藏</label>
			</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>
				<div id="div_btn" class="div_btn">
					<input type="button" onclick="From_submit(this);" class="btn btn-primary" value="保存"/>
					<input type="reset" class="btn btn-warning" value="重置"/>
					{if $info}
						<input type="button" class="btn btn-default" onclick="javascript:history.go(-1)" value="返回"/>
					{/if}
				</div>
			</td>
		</tr>
		</tbody>
	</table>
</div>


{literal}
	<script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map("allmap");
        map.centerAndZoom("醴陵",13);
        //单击获取点击的经纬度
        map.addEventListener("click",function(e){
            $("#Abscissa").val(e.point.lng);
            $("#Ordinate").val(e.point.lat);
            // alert(e.point.lng + "," + e.point.lat);
        });
	</script>
	<script type="text/javascript">
        /**
         * 图集添加
         */
        function addAtlas(obj, type){

            var time = new Date().getTime();
            var atlas_height = '';
            var div_height = '';
            var tpl =
                '<div style="margin: 10px 75px; float: left;" class="sort_div modules">' +
                '<div style="width: 450px" class="m_title">' +
                '<input type="hidden" id="atlas1_img_' + time + '" name="atlas1_img[]" value=""/>' +
                '<form action="?do=Atlas" enctype="multipart/form-data" method="post" target="upframe" class="form-inline">' +
                '<div class="input-group" style="margin: 1px 0px">' +
                '<div class="input-group-addon">选择图片</div>' +
                '<div class="atlas_img_div form-group" style="position: relative">' +
                '<img id="atlas_img_' + time + '" src="" alt="" style="max-width: 360px;max-height: 240px"/>' +
                '<div class="form-group atlas1_img_div div-child-left">' +
                '<input type="hidden" name="atlas" value="fileimg_' + time + '">' +
                '<input style="width: 360px; height: 240px" type="file" class="form-control input-file" name="fileimg_' + time + '" id="fileimg_' + time + '" onchange="$(this).parents(\'form\').submit();"/>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</form>' +
                '<div class="input-group" style="margin: 1px 0px">' +
                '<div class="input-group-addon">图片文字</div>' +
                '<textarea style="width: 300px; height: 123px" type="text" class="form-control" name="atlas_text[]" id="atlas_text"></textarea>' +
                '<div>' +
                '<input type="button" class="btn btn-primary" value="新增" onclick="addAtlas($(this))" style="margin-top: 10px; margin-left: 5px"/>' +
                '<input type="button" class="btn btn-default" value="删除" onclick="atlasdelCode($(this))" style="margin-top: 40px; margin-left: 5px"/>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</div>';
            if(type == 1) {
                $('#module_list').prepend(tpl);
            } else{
                obj.parent().parent().parent().parent().after(tpl);
            }
            set_up();
        }

        /**
         * 图集删除
         */
        function atlasdelCode(obj) {
            obj.parent().parent().parent().parent().remove();
        }

        /**
         * 添加
         */
        function addCode(obj) {
            var time = new Date().getTime();
            var tpl =
                '<div class="cover_img_div">' +
                '<img id="preview_img_' + time + '" src="" style="width:auto;max-width:600px;height:160px;">' +
                '<form action="?do=UploadImg&id=' + time + '" enctype="multipart/form-data" method="POST" target="upframe">' +
                '<div class="input-group">' +
                '<input type="hidden" name="file_name" value="fileimg_' + time + '">' +
                '<input class="form-control" style="width: 99px;" type="file" name="fileimg_' + time + '" accept=".jpg,.png,.jpeg" onchange="fileChange(' + time + ')"> &nbsp;' +
                '</div>' +
                '</form>' +
                '<a class="btn btn-default input-file" href="javascript:void(0);">选择图片</a>' +
                '<a class="btn btn-default delete_btn" onclick="delCode($(this), ' + time + ')">删除</a>' +
                '<input type="hidden" id="cover_' + time + '" name="cover[]" value="" />' +
                '</div>';
            obj.parent().before(tpl);
            return time;
        }

        /**
         * 删除
         */
        function delCode(obj) {
            obj.parent().remove();
        }
        /**
         * 监听图片内容变动
         */
        function fileChange(index) {
            $("input[name=fileimg_" + index + "]").parents('form').submit();
        }
        /**
         * 图片上传回调函数
         */
        function _uploadImg(data) {
            if (typeof data == 'string') {
                data = eval('(' + data + ')');
            }

            if (data.status != 200) {
                top.swal('出错了', data.msg, 'error');
                return false;
            } else {
                data = data['data'];
                var index = data['file_name'].split("_")[1];
                $("#preview_img_" + index).attr('src', data['img_url']);
                $("#cover_" + index).val(data['img_url']);
            }
        }

        /**
         * 图集上传回调
         */
        function __uploadAtlas(data) {
            if (typeof data == 'string') {
                data = eval('(' + data + ')');
            }

            if (data.status != 200) {
                top.swal('出错了', data.msg, 'error');
                return false;
            } else {
                data = data['data'];
                var index = data['file_name'].split("_")[1];
                $("#atlas_img_" + index).attr('src', data['img_url']);
                $("#atlas1_img_" + index).val(data['img_url']);
            }
        }

        function From_submit(btn) {
            var btn = $(btn);
            if (btn.prop('disabled')) {
                return false;
            }
            $('#div_btn').find('input').prop('disabled', true);

            var Name, alias, CateId, typelen, typedata, tag, viewtag, content, error, urlfrom, uri, tata;
            Name = $("#Name").val();
            //alias = $("#Alias").val();
            CateId = $("#CateId").val();
            error = '';

            if (error != '') {
                $('#div_btn').find('input').prop('disabled', false);
                top.sweetAlert('数据不符合规范,禁止提交。', error, 'error');
                return false;
            } else {
                $('#Content').val(content);
                $('form').remove();
                $('#myformtable').wrap('<form id="form_main" enctype="multipart/form-data" method="post" action="?do=Update"></form>');
                $('#form_main').submit();
                return false;
            }
        }

        $("#add_btn").click(function () {
            var Name = $.trim($('#Name').val());
            if (!Name.length) {
                top.swal('出错了', '请填写名称！', 'error');
                return false;
            }


            //验证头像
            var Avatar = $("#Cover").attr("info");
            var error = '';
            if (Avatar != 'yes') {
                error += "尺寸不符合规范\r\n";
            }

            if (error != '' && undefined != Avatar) {
                top.swal('出错了', error, 'error');
                return false;
            }

            return true;
        });

        //验证图片的宽和高
        function verifyImg(obj) {
            $('#div_btn').find('input').attr('disabled', 'disabled');
            var file = obj[0].files[0];

            if (file.size > 3097152) {
                obj.attr('info', 'size');
                $('#div_btn').find('input').removeAttr('disabled');
                return;
            }

            var img_url = window.URL.createObjectURL(file);

            var minW, minH;
            minW = obj.attr('minW');
            minH = obj.attr('minH');

            obj.attr('info', 'yes');

            var ImgObj = new Image();

            ImgObj.onload = function () {
                if (minW > ImgObj.width) {
                    obj.attr('info', 'no');
                }

                if (minH > ImgObj.height) {
                    obj.attr('info', 'no');
                }
                $('#div_btn').find('input').removeAttr('disabled');
            }

            ImgObj.src = img_url;
        }

        //图片上传初始化
        $(".file_img").each(function () {
            var accept = ['jpg', 'png', 'bmp', 'gif'];
            var input_obj = {
                showCaption: false,
                showClose: false,
                uploadAsync: false,
                showRemove: false,
                showUpload: false,
                uploadUrl: "#",
                language: 'zh', //设置语言
                allowedPreviewTypes: ['image'],
                allowedFileTypes: ['image'],
                allowedFileExtensions: accept,//接收的文件后缀
            };
            $(this).attr("accept", '.' + accept.join(',.'));

            var img_url = $(this).attr("data");
            if (img_url != '') {
                input_obj.initialPreview = [
                    '<img src="' + img_url + '" class="kv-preview-data file-preview-image" style="width:auto;height:160px;">'
                ];
            }
            var maxSize = $(this).attr("maxSize");
            if (maxSize > 0) {
                input_obj.maxFileSize = maxSize;
            }

            $(this).fileinput(input_obj);
        });

        //上传插件对象
        function uploadObj() {
            return obj = {
                showCaption: false,
                showClose: false,
                uploadAsync: false,
                showRemove: false,
                showUpload: false,
                uploadUrl: "#",
                language: 'zh', //设置语言
            };
        }
	</script>
{/literal}
</body>
</html>